import React, { useState } from "react";
import style from "../../../scss/index.module.scss";
import Buttons from "../../../componet/Button/button";
import Input from "../../../componet/Input/InputComponent";
import { Dropdown } from "../../../componet/index";
import { Button, DatePicker, message, Upload } from "antd";
import type { DatePickerProps, UploadProps } from "antd";
import en from "antd/es/date-picker/locale/en_US";
import dayjs from "dayjs";
import buddhistEra from "dayjs/plugin/buddhistEra";
import { PlusOutlined } from "@ant-design/icons";

import axios from "../../../axios";

const props: UploadProps = {
  name: "file",
  action: "https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload",
  headers: {
    authorization: "authorization-text",
  },
  onChange(info) {
    if (info.file.status !== "uploading") {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === "done") {
      message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === "error") {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};

const onChange: DatePickerProps["onChange"] = (date, dateString) => {
  console.log(date, dateString);
};

dayjs.extend(buddhistEra);
const defaultValue = dayjs("0000-00-00");
const buddhistLocale: typeof en = {
  ...en,
  lang: {
    ...en.lang,
    fieldDateFormat: "BBBB-MM-DD",
    fieldDateTimeFormat: "BBBB-MM-DD HH:mm:ss",
    yearFormat: "BBBB",
    cellYearFormat: "BBBB",
  },
};

const onChange2: DatePickerProps["onChange"] = (_, dateStr) => {
  console.log("onChange:", dateStr);
};

export default function MemberAdd(props: {
  setShow: (show: boolean) => void;
  setShow2: (show2: boolean) => void;
  setShow3: (show3: boolean) => void;
}) {
  const [name, setName] = useState("");
  const [lx, setLx] = useState("");
  const [zj, setZj] = useState("");
  const [aa, setAa] = useState("");

  const options = [
    { value: "正式党员", label: "正式党员" },
    { value: "预备党员", label: "预备党员" },
    { value: "发展党员", label: "发展党员" },
    { value: "积极分子", label: "积极分子" },
  ];

  const options2 = [
    { value: "A区域党支部", label: "A区域党支部" },
    { value: "B区域党支部", label: "B区域党支部" },
    { value: "C区域党支部", label: "C区域党支部" },
    { value: "D区域党支部", label: "D区域党支部" },
  ];

  const add = async () => {
    if (name || lx || zj) {
      const res:any = await axios.post("http://localhost:3000/dygladd", {
        name: name,
        type: lx,
        organization: zj,
      });
      if (res.code === 240) {
        message.success("添加成功");
        props.setShow(true);
        props.setShow2(false);
        props.setShow3(false);
      } else {
        message.error("添加失败");
      }
    } else {
      message.error("请填写完整信息");
    }
  };

  return (
    <div className={style.mermberzong}>
      <div className={style.titleBox}>
        <span className={style.title}>新增党员</span>
      </div>
      <div className={style.memberzhu}>
        <div className={style.member}>
          <div>
            <span className={style.xing}>*</span>姓名{" "}
            <Input
              onChange={(e) => {
                setName(e);
              }}
            ></Input>
          </div>
          <div>
            性别{" "}
            <Input
              onChange={(e) => {
                setAa(e);
              }}
            ></Input>
          </div>
        </div>
        <div className={style.member}>
          <div className={style.memberbox}>
            <span className={style.xing}>*</span>类型
            <Dropdown
              value={lx}
              options={options}
              onChange={(e) => {
                setLx(e);
              }}
            />
          </div>
          <div>
            联系电话{" "}
            <Input
              onChange={(e) => {
                setAa(e);
              }}
            ></Input>
          </div>
        </div>
        <div className={style.member}>
          <div className={style.memberbox}>
            <span className={style.xing}>*</span>组织
            <Dropdown
              value={zj}
              options={options2}
              onChange={(e) => {
                setZj(e);
              }}
            />
          </div>
          <div className={style.memberbox}>
            民族 <Dropdown options={[]} />
          </div>
        </div>
        <div className={style.member}>
          <div>
            照片
            <Upload {...props}>
              <Button
                icon={<PlusOutlined />}
                className={style.mxkupload}
              ></Button>
            </Upload>
          </div>
          <div className={style.memberbox}>
            籍贯
            <Dropdown options={[]} />
          </div>
        </div>
        <div className={style.member}>
          <div className={style.memberbox}>
            学历
            <Dropdown options={[]} />
          </div>
          <div className={style.memberbox}>
            出生日期
            <DatePicker onChange={onChange} placeholder="请选择日期" />
          </div>
        </div>
        <div className={style.member}>
          <div>
            党内职务{" "}
            <Input
              onChange={(e) => {
                setAa(e);
              }}
            ></Input>
          </div>
          <div>
            手机号码{" "}
            <Input
              onChange={(e) => {
                setAa(e);
              }}
            ></Input>
          </div>
        </div>
        <div className={style.member}>
          <div>
            转为预备党员日期{" "}
            <DatePicker
              defaultValue={defaultValue}
              showTime
              locale={buddhistLocale}
              onChange={onChange2}
              placeholder="请选择日期"
            />
          </div>
          <div>
            转为正式党员日期{" "}
            <DatePicker
              defaultValue={defaultValue}
              showTime
              locale={buddhistLocale}
              onChange={onChange2}
              placeholder="请选择日期"
            />
          </div>
        </div>
        <div className={style.member}>
          <div>
            住址{" "}
            <Input
              className={style.memberzj}
              onChange={(e) => {
                setAa(e);
              }}
            ></Input>
          </div>
        </div>
        <div className={style.member}>
          <div>
            是否流动党员<span> </span>
            <input type="radio" /> 是
            <input type="radio" /> 否
          </div>
          <div>
            外出流向{" "}
            <Input
              onChange={(e) => {
                setAa(e);
              }}
            ></Input>
          </div>
        </div>
        <div className={style.member}>
          <div>
            是否失联党员<span> </span>
            <input type="radio" /> 是
            <input type="radio" /> 否
          </div>
          <div>
            失联日期{" "}
            <DatePicker
              defaultValue={defaultValue}
              showTime
              locale={buddhistLocale}
              onChange={onChange2}
              placeholder="请选择日期"
            />
          </div>
        </div>
      </div>
      <div className={style.memberfooter}>
        <Buttons
          text={"取消"}
          setBackgroundColor="#fff"
          onClick={() => {
            props.setShow(true);
            props.setShow2(false);
            props.setShow3(false);
          }}
        ></Buttons>
        <Buttons
          className={style.footbtn2}
          text={"确定"}
          onClick={() => {
            add();
          }}
        ></Buttons>
      </div>
    </div>
  );
}
